/*
 * icenter page
**/
<template>
<div>
<div class="quick-footernav"><router-link to="/icenter" class="ui-btn">&nbsp;&nbsp;返回&nbsp;&nbsp;</router-link></div>
<div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form" id="submitForm">
        <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input type="search" class="weui-search-bar__input" id="searchInput" v-model="searchInput" placeholder="搜索">
            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
            <span class="fl">我的玩赚</span>
            <div class="fr">
              <i class="weui-icon-search"></i>
              <span>搜索</span>
            </div>
        </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="weui-cells" v-load-more="loaderMore">
  <div v-for="item in gameRecordList" @click="gameRecord(item.appid, item.url)" class="weui-cell">
    <div class="weui-cell__bd">
      <span style="font-size:14px; color:#666;">{{item.title}}</span>
<!--       <span style="vertical-align: middle" v-if="item.action==1">分享{{item.action_name}}活动的奖励</span>
      <span style="vertical-align: middle" v-if="item.action==2">分享内容被<span style="color: #feb902;">{{item.action_name}}</span>完成的奖励</span>
      <span style="vertical-align: middle" v-if="item.action==3">兑换了{{item.action_name}}</span> -->
    </div>
    <div class="weui-cell__ft">
      <p style="font-size: 13px;color: #feb902; text-decoration:underline;" v-if="item.url">查看详情</p>
      <p style="font-size: 12px;">{{item.create_time}}</p>
      <!-- <p style="font-size: 13px;color: #feb902;" v-if="item.type!=3">+{{item.score}} <i class="icon-gold"></i></p> -->
    </div>
  </div>
  <div class="weui-loadmore" v-if="showLoading">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载</span>
  </div>
  <div class="weui-loadmore weui-loadmore_line" v-if="touchend">
      <span class="weui-loadmore__tips">没有更多</span>
  </div>
</div>
<div class="mod-footer-place"></div>
</div>
</template>
<script>
import vTab from 'components/common/tab'
import $ from 'webpack-zepto'
import {loadMore} from 'src/config/mixin'
import {getUserGameRecord, gameRecord} from '../../../service/getData'
import {mapState} from 'vuex'
export default {
  data () {
    return {
      gameRecordList: [],
      searchInput: '',  // 搜索关键字
      offset: 1, // 批次加载数据 每次+1
      pageSize: 16, // 每页显示数据条数
      preventRepeatReuqest: false, // 到达底部加载数据，防止重复加载
      showLoading: true, // 显示加载动画
      touchend: false // 没有更多数据
    }
  },
  mixins: [loadMore],
  components: {
    'v-tab': vTab
  },
  computed: {
    ...mapState([
      'I9RIA'
    ])
  },
  mounted () {
    let _this = this
    var $searchBar = $('#searchBar')
    var $searchResult = $('#searchResult')
    var $searchText = $('#searchText')
    var $searchInput = $('#searchInput')
    var $searchClear = $('#searchClear')
    var $searchCancel = $('#searchCancel')

    function hideSearchResult () {
      $searchResult.hide()
      $searchInput.val('')
    }
    function cancelSearch () {
      hideSearchResult()
      $searchBar.removeClass('weui-search-bar_focusing')
      $searchText.show()
    }

    $searchText.on('click', function () {
      $searchBar.addClass('weui-search-bar_focusing')
      $searchInput.focus()
    })
    $searchInput.on('blur', function () {
      if (!this.value.length) cancelSearch()
    }).on('input', function () {
      if (this.value.length) {
        $searchResult.show()
      } else {
        $searchResult.hide()
      }
    })

    $searchClear.on('click', function () {
      hideSearchResult()
      _this.searchInput = ''
      _this.initData()
      $searchInput.focus()
    })
    $searchCancel.on('click', function () {
      cancelSearch()
      $searchInput.blur()
    })
    $searchCancel.on('keydown', function (e) {
      if (e.which === 13) {
        e.preventDefault()
        return
      }
    })
    $('#submitForm').on('submit', function () {
      _this.initData()
      return false
    })
    if (this.I9RIA && this.I9RIA.wxJsApiConf) {
      this.initData()
    }
  },
  methods: {
    async initData () {
      this.offset = 1
      let res = await getUserGameRecord(this.offset, this.pageSize, this.searchInput)
      this.showLoading = false
      this.touchend = true
      this.preventRepeatReuqest = false
      if (res.code !== 0) return
      if (res.data.list.length < this.pageSize) {
        this.touchend = true
      } else {
        this.touchend = false
      }
      this.gameRecordList = res.data.list
    },
    handleBlur () {
    },
    async gameRecord (id, url) {
      if (!url) return
      await gameRecord(id)
      window.location.href = url
    },
    async loaderMore () {
      if (this.touchend) {
        return
      }
      // 防止重复请求
      if (this.preventRepeatReuqest) {
        return
      }
      this.showLoading = true
      this.preventRepeatReuqest = true

      // 数据的定位+1
      this.offset++
      let res = await getUserGameRecord(this.offset, this.pageSize, this.searchInput)
      if (res.code !== 0) {
        this.showLoading = false
        this.touchend = true
        this.preventRepeatReuqest = false
        return
      }
      res.data.list = res.data.list || []
      this.showLoading = false
      this.gameRecordList = [...this.gameRecordList, ...res.data.list]
      // 当获取数据小于20，说明没有更多数据，不需要再次请求数据
      if (res.data.list.length < this.pageSize) {
        this.touchend = true
        return
      }
      this.preventRepeatReuqest = false
    }
  },
  watch: {
    I9RIA (res) {
      let val = res || {}
      if (val && val.wxJsApiConf) {
        this.initData()
      }
      if (val.code === 9999) {
        this.$router.push('/404')
      }
    }
  }
}
</script>
<style scoped>
#searchBar{background:#fff;}
.weui-search-bar__box, .weui-search-bar__form, .weui-search-bar__label{background:#fff; border-color:#fff;}
.weui-search-bar__label .fl{font-size:.14rem; background:#fff; color:#ffa200; line-height:26px;}
.weui-search-bar_focusing .weui-search-bar__box,
.weui-search-bar_focusing .weui-search-bar__form,
.weui-search-bar_focusing .weui-search-bar__box{background:#EFEFF4; border-radius:8px;}
.weui-search-bar__cancel-btn{color:#ffa200;}
</style>
